<template>
  <el-row>
    <el-form
      ref="form"
      size="mini"
      label-width="150px"
    >
      <el-form-item :label="$t('dcqc.kqsj')">
        <el-switch
          v-model="dcqcEventInfo2.enable"
          size="mini"
        />
        <span
          v-show="dcqcEventInfo2.enable"
          style="color: #909399; font-size: 8px;margin-left: 3px"
        >
          Tips:{{ $t('dcqc.tips') }}
        </span>
      </el-form-item>
      <el-form-item :label="$t('dcqc.event_type')">
        <el-radio-group
          v-model="dcqcEventInfo2.eventType"
          :disabled="!dcqcEventInfo2.enable"
        >
          <el-radio
            label="dialog"
            value="dialog"
          >弹窗</el-radio>
          <el-radio
            label="toPanel"
            value="toPanel"
          >跳转仪表板</el-radio>
          <el-radio
            label="back"
            value="back"
          >返回</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-row v-if="dcqcEventInfo2.eventType === 'dialog'">
        <el-form-item :label="$t('dcqc.dialogTitle')">
          <el-input
            v-model="dcqcEventInfo2.dialogTitle"
            :disabled="!dcqcEventInfo2.enable"
          />
        </el-form-item>
        <el-form-item :label="$t('dcqc.tckd')">
          <el-input
            v-model="dcqcEventInfo2.dialogWidth"
            :disabled="!dcqcEventInfo2.enable"
            type="number"
            min="200"
            maxlength="4"
          >
            <template #append>px</template>
          </el-input>
        </el-form-item>
        <el-form-item :label="$t('dcqc.tcgd')">
          <el-input
            v-model="dcqcEventInfo2.dialogHeight"
            :disabled="!dcqcEventInfo2.enable"
            type="number"
            min="200"
            maxlength="4"
          >
            <template #append>px</template>
          </el-input>
        </el-form-item>
        <el-form-item :label="$t('dcqc.lysj')">
          <el-col :span="9">
            <treeselect
              v-model="dcqcEventInfo2.targetPanelId"
              :disabled="!dcqcEventInfo2.enable"
              :options="panelList"
              :disable-branch-nodes="true"
              :normalizer="normalizer"
              :placeholder="$t('panel.select_jump_panel')"
              :no-children-text="$t('commons.treeselect.no_children_text')"
              :no-options-text="$t('commons.treeselect.no_options_text')"
              :no-results-text="$t('commons.treeselect.no_results_text')"
              style="margin-right: 10px"
              @select="panelNodeClick"
              @input="inputVal"
            />
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-row style="height: 145px;overflow-y: auto">
            <el-row
              v-for="(targetViewInfo, index) in dcqcEventInfo2.targetViewInfoList"
              :key="index"
            >
              <el-col :span="9">
                <div class="select-filed">
                  <el-select
                    v-model="targetViewInfo.targetViewId"
                    :disabled="!dcqcEventInfo2.enable"
                    style="width: 100%"
                    size="mini"
                    :placeholder="$t('fu.search_bar.please_select')"
                    @change="viewInfoOnChange(targetViewInfo)"
                  >
                    <el-option
                      v-for="item in currentLinkPanelViewArray"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                      <span
                        v-if="item.isPlugin"
                        style="float: left"
                      >
                        <svg-icon
                          :icon-class="item.type !== 'buddle-map' ? ('/api/pluginCommon/staticInfo/' + item.type + '/svg') : item.type"
                          style="width: 14px;height: 14px"
                        />
                      </span>
                      <span
                        v-else
                        style="float: left"
                      >
                        <svg-icon
                          :icon-class="item.type"
                          style="width: 14px;height: 14px"
                        />
                      </span>
                      <span style="float: left; font-size: 12px">{{ item.name }}</span>
                    </el-option>
                  </el-select>
                </div>
              </el-col>
              <el-col :span="9">
                <div class="select-filed">
                  <el-select
                    v-model="targetViewInfo.targetFieldId"
                    :disabled="!dcqcEventInfo2.enable"
                    style="width: 100%"
                    size="mini"
                    :placeholder="$t('fu.search_bar.please_select')"
                  >
                    <el-option
                      v-for="viewField in viewIdFieldArrayMap[targetViewInfo.targetViewId]"
                      :key="viewField.id"
                      :label="viewField.name"
                      :value="viewField.id"
                    >
                      <span style="float: left">
                        <svg-icon
                          v-if="viewField.deType === 0"
                          icon-class="field_text"
                          class="field-icon-text"
                        />
                        <svg-icon
                          v-if="viewField.deType === 1"
                          icon-class="field_time"
                          class="field-icon-time"
                        />
                        <svg-icon
                          v-if="viewField.deType === 2 || viewField.deType === 3"
                          icon-class="field_value"
                          class="field-icon-value"
                        />
                        <svg-icon
                          v-if="viewField.deType === 5"
                          icon-class="field_location"
                          class="field-icon-location"
                        />
                      </span>
                      <span style="float: left;font-size: 12px">{{ viewField.name }}</span>
                    </el-option>
                  </el-select>
                </div>
              </el-col>
              <el-col :span="4">
                <el-input
                  v-model="targetViewInfo.content"
                  :disabled="!dcqcEventInfo2.enable"
                  placeholder="输入匹配值"
                />
              </el-col>
              <el-col :span="2">
                <div>
                  <el-button
                    icon="el-icon-delete"
                    type="text"
                    size="small"
                    style="float: left"
                    @click="deleteLinkJumpField(index)"
                  />
                </div>
              </el-col>
            </el-row>
            <el-row class="bottom">
              <el-button
                :disabled="!dcqcEventInfo2.targetPanelId"
                size="mini"
                type="success"
                icon="el-icon-plus"
                round
                @click="addLinkJumpField"
              >{{ $t('panel.add_jump_field') }}
              </el-button>
            </el-row>
            <i
              slot="reference"
              class="icon iconfont icon-edit slot-class"
            />
          </el-row>
        </el-form-item>
      </el-row>
      <el-row v-else-if="dcqcEventInfo2.eventType === 'toPanel'">
        <el-form-item :label="$t('dcqc.lysj')">
          <el-col :span="9">
            <treeselect
              v-model="dcqcEventInfo2.targetPanelId"
              :disabled="!dcqcEventInfo2.enable"
              :options="panelList"
              :disable-branch-nodes="true"
              :normalizer="normalizer"
              :placeholder="$t('panel.select_jump_panel')"
              :no-children-text="$t('commons.treeselect.no_children_text')"
              :no-options-text="$t('commons.treeselect.no_options_text')"
              :no-results-text="$t('commons.treeselect.no_results_text')"
              style="margin-right: 10px"
              @select="panelNodeClick"
              @input="inputVal"
            />
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-row style="height: 145px;overflow-y: auto">
            <el-row
              v-for="(targetViewInfo, index) in dcqcEventInfo2.targetViewInfoList"
              :key="index"
            >
              <el-col :span="9">
                <div class="select-filed">
                  <el-select
                    v-model="targetViewInfo.targetViewId"
                    :disabled="!dcqcEventInfo2.enable"
                    style="width: 100%"
                    size="mini"
                    :placeholder="$t('fu.search_bar.please_select')"
                    @change="viewInfoOnChange(targetViewInfo)"
                  >
                    <el-option
                      v-for="item in currentLinkPanelViewArray"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                      <span
                        v-if="item.isPlugin"
                        style="float: left"
                      >
                        <svg-icon
                          :icon-class="item.type !== 'buddle-map' ? ('/api/pluginCommon/staticInfo/' + item.type + '/svg') : item.type"
                          style="width: 14px;height: 14px"
                        />
                      </span>
                      <span
                        v-else
                        style="float: left"
                      >
                        <svg-icon
                          :icon-class="item.type"
                          style="width: 14px;height: 14px"
                        />
                      </span>
                      <span style="float: left; font-size: 12px">{{ item.name }}</span>
                    </el-option>
                  </el-select>
                </div>
              </el-col>
              <el-col :span="9">
                <div class="select-filed">
                  <el-select
                    v-model="targetViewInfo.targetFieldId"
                    :disabled="!dcqcEventInfo2.enable"
                    style="width: 100%"
                    size="mini"
                    :placeholder="$t('fu.search_bar.please_select')"
                  >
                    <el-option
                      v-for="viewField in viewIdFieldArrayMap[targetViewInfo.targetViewId]"
                      :key="viewField.id"
                      :label="viewField.name"
                      :value="viewField.id"
                    >
                      <span style="float: left">
                        <svg-icon
                          v-if="viewField.deType === 0"
                          icon-class="field_text"
                          class="field-icon-text"
                        />
                        <svg-icon
                          v-if="viewField.deType === 1"
                          icon-class="field_time"
                          class="field-icon-time"
                        />
                        <svg-icon
                          v-if="viewField.deType === 2 || viewField.deType === 3"
                          icon-class="field_value"
                          class="field-icon-value"
                        />
                        <svg-icon
                          v-if="viewField.deType === 5"
                          icon-class="field_location"
                          class="field-icon-location"
                        />
                      </span>
                      <span style="float: left;font-size: 12px">{{ viewField.name }}</span>
                    </el-option>
                  </el-select>
                </div>
              </el-col>
              <el-col :span="4">
                <el-input
                  v-model="targetViewInfo.content"
                  :disabled="!dcqcEventInfo2.enable"
                  placeholder="输入匹配值"
                />
              </el-col>
              <el-col :span="2">
                <div>
                  <el-button
                    icon="el-icon-delete"
                    type="text"
                    size="small"
                    style="float: left"
                    @click="deleteLinkJumpField(index)"
                  />
                </div>
              </el-col>
            </el-row>
            <el-row class="bottom">
              <el-button
                :disabled="!dcqcEventInfo2.targetPanelId"
                size="mini"
                type="success"
                icon="el-icon-plus"
                round
                @click="addLinkJumpField"
              >{{ $t('panel.add_jump_field') }}
              </el-button>
            </el-row>
            <i
              slot="reference"
              class="icon iconfont icon-edit slot-class"
            />
          </el-row>
        </el-form-item>
      </el-row>
      <el-row class="root-class">
        <el-button
          type="primary"
          @click="onSubmit"
        >{{ $t('panel.confirm') }}</el-button>
        <el-button @click="onClose">{{ $t('panel.cancel') }}</el-button>
      </el-row>
    </el-form>
  </el-row>
</template>

<script>
import { mapState } from 'vuex'
import { deepCopy } from '@/components/canvas/utils/utils'
import { groupTree } from '@/api/panel/panel'
import { detailList } from '@/api/panel/panelView'

export default {
  props: {
    dcqcEventInfo: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      dcqcEventInfo2: {},
      componentType: null,
      linkageActiveStatus: false,
      panelList: [],
      currentLinkPanelViewArray: [],
      viewIdFieldArrayMap: {}
    }
  },
  computed: {
    ...mapState([
      'curComponent'
    ])
  },
  mounted() {
    console.log('看下初始的dcqcEvent数据', this.dcqcEventInfo)
    this.dcqcEventInfo2 = { ...this.dcqcEventInfo }
    this.init()
  },
  methods: {
    init() {
      // 获取可关联的仪表板
      groupTree({}).then(rsp => {
        this.panelList = rsp.data
        if (this.dcqcEventInfo2.targetPanelId) {
          this.getPanelViewList(this.dcqcEventInfo2.targetPanelId)
        }
      })
    },
    normalizer(node) {
      // 去掉children=null的属性
      if (node.children === null || node.children === 'null') {
        delete node.children
      }
    },
    // 数据来源点击事件
    panelNodeClick(data, node) {
      this.dcqcEventInfo2.targetViewInfoList = []
      this.addLinkJumpField()
      this.getPanelViewList(data.id)
    },
    // 数据来源输入事件
    inputVal(value) {
      if (!value) {
        this.dcqcEventInfo2.targetViewInfoList = [
        ]
        this.viewIdFieldArrayMap = {}
        this.currentLinkPanelViewArray = []
      }
    },
    addLinkJumpField() {
      this.dcqcEventInfo2.targetViewInfoList.push({
        targetViewId: '',
        targetFieldId: ''
      })
    },
    deleteLinkJumpField(index) {
      console.log(index, this.dcqcEventInfo2.targetViewInfoList)
      this.dcqcEventInfo2.targetViewInfoList.splice(index, 1)
    },
    viewInfoOnChange(targetViewInfo) {
      targetViewInfo.targetFieldId = null
    },
    // 获取当前视图字段 关联仪表板的视图信息列表
    getPanelViewList(panelId) {
      detailList(panelId).then(rsp => {
        this.viewIdFieldArrayMap = {}
        this.currentLinkPanelViewArray = rsp.data
        if (this.currentLinkPanelViewArray) {
          this.currentLinkPanelViewArray.forEach(view => {
            this.viewIdFieldArrayMap[view.id] = view.tableFields
          })
        }
      })
    },
    onSubmit() {
      this.curComponent.dcqcEvent = deepCopy(this.dcqcEventInfo2)
      this.$store.commit('canvasChange')
      this.onClose()
    },
    onClose() {
      this.$emit('onClose')
    }
  }
}
</script>

<style lang="scss" scoped>
.slot-class {
  color: white;
}

.bottom {
  margin-top: 20px;
  text-align: center;

}

.ellip {
  /*width: 100%;*/
  margin-left: 10px;
  margin-right: 10px;
  overflow: hidden;
  /*超出部分隐藏*/
  white-space: nowrap;
  /*不换行*/
  text-overflow: ellipsis;
  /*超出部分文字以...显示*/
  background-color: #f7f8fa;
  color: #3d4d66;
  font-size: 12px;
  line-height: 24px;
  height: 24px;
  border-radius: 3px;
}

.select-filed {
  /*width: 100%;*/
  margin-left: 10px;
  margin-right: 10px;
  overflow: hidden;
  /*超出部分隐藏*/
  white-space: nowrap;
  /*不换行*/
  text-overflow: ellipsis;
  /*超出部分文字以...显示*/
  color: #3d4d66;
  font-size: 12px;
  line-height: 35px;
  height: 35px;
  border-radius: 3px;
}

::v-deep .el-popover {
  height: 200px;
  overflow: auto;
}

.icon-font {
  color: white;
}
.root-class{
  margin: 15px 0 5px;
  text-align: center;
}
</style>
